<!--网格行-->
<template>
  <div class="gantt-row"
    @mousedown="mousedown($event)"
    :style="style" 
    :class="[
      { 'is-active': rowActive },
      { 'is-top': topActive },
      { 'is-left-active': dragEndActive }
    ]">
    <slot></slot>
    <!--可以触发鼠标over的盒子-->
    <div class="over-box over" v-if="overActive"
    @mouseover="mouserOver">
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(['mouseOverDefault', 'mouseDownDefault','mouseDownUpDefault','mouseOverLeftDefault'])
const props = defineProps({
  overActive: {
    type: Boolean,
    default: false
  },
  //right的active
  rowActive: {
    type: Boolean,
    default: false
  },
  // left的拖拽目的地的active
  dragEndActive: {
    type: Boolean,
    default: false
  },
  topActive: {
    type: Boolean,
    default: false
  },
  // 用于区分左边的和右边的ganttRow
  isLeft: {
    type: Boolean,
    default: false
  },
  style: {
    type: Object,
    default: ()=> {
      
    }
  }
})

const mouserOver = () => {
  // right
  if(!props.isLeft) {
    emit('mouseOverDefault')
    return
  }
  emit('mouseOverLeftDefault')
}

const mousedown = (e) => {
  // row 鼠标按下   overActive false的时候可触发
  if (!props.overActive && props.isLeft) {
    // 右键点击的情况下，不触发下列事件
    if (e.button === 2) {
      return
    }

    emit('mouseDownDefault')

    window.onmouseup = () => {
      emit('mouseDownUpDefault')
      window.onmouseup = null
    }
  }
}
</script>

<style scoped lang="scss">
.gantt-row {
  height: 60px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  transition: background-color .2s;

  &.is-active {
    background-color: $tableRowActiveColor;
  }

  &.is-top {
    background-color: $tableRowSetTopRightColor;
  }
  &.is-left-active {
    box-sizing: border-box;
    border-top: 2px solid $tableRowDragToActiveColor;
  }
  .over-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -100;
    &.over {
      z-index: 1000;
    }
  }
}
</style>
